<template>
	<view class="my">
		<view class="title_card">
			<view class="pic_img">
				<view class="login" v-if="login">
					<label @click="getUserInfo" v-if="userIcon == `../../static/images/touxiang.png`">
						<text class="text">立即登录</text>
					</label>
					<label v-if="userIcon !== `../../static/images/touxiang.png`">
						<text class="active-text">
							Hi,{{ nickName}}
						</text>
					</label>
					<view class="text flex">
						<view class="">
							很高兴为您服务！
						</view>
						</view>
				</view>
				<view class="photo" @click="getUserInfo">
					<image class="photo" :src="userIcon" mode="scaleToFill" lazy-load="true"></image>
				</view>
			</view>
			<view class="status_bar">
				<view class="grid-item" v-for="(item, index) in orderList" :key="index" @click="toOrderPage(item)">
					<view class="num" v-if="!!orderStatus[item.key]">{{orderStatus[item.key]}}</view>
					<image class="card-image" :src="item.icon" mode="scaleToFill" lazy-load="true"></image>
					<view class="text">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<view class="coupon" @click="handleBusiness">
			<image src="/static/images/indexImg/000000.png" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view class="nine_grid">
			<view class="item" v-for="(item, index) in navList" :index="index" :key="index">
				<view class="grid-item-box-cate" @click="toPage(item)">
					<image :src="item.icon" class="categroy-image" mode="scaleToFill" />
					<view class="text">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="recommend">
			<view class="head">
				<image src="@/static/images/recommend.png" class="img"></image>
				<view class="title">为您推荐 </view>
			</view>
			<goods-card :itemList="itemList" className="noPadding"></goods-card>
		</view>
	</view>
</template>
<script>
	import goodsCard from '@/components/goodsCard.vue';
	import orderList from "@/common/orderList.js"
	import navList from "@/common/navList.js"
	export default {
		components: {
			goodsCard
		},
		onLoad() {
			this.userIcon = getApp().globalData.userInfo.avatarUrl || `../../static/images/touxiang.png`;
			console.log(this.userIcon);
			this.avatarUrl=getApp().globalData.userInfo.avatarUrl
			this.nickName = getApp().globalData.userInfo.nickName;
			this.getOrderCount()
			this.getIndexList()
		},
		onShow() {
			const token = uni.getStorageSync("token");
			if (!token) this.userIcon = "../../static/images/touxiang.png";
			this.getOrderCount();
		},
		data() {
			return {
				userIcon: "",
				nickName: "",
				login: true,
				page: 1,
				pageSize: 8,
				isload: false,
				orderList,
				navList,
				itemList: [],
				orderStatus: {
					no_pay: 0,
					no_delivery: 0,
					no_send: 0,
					rentin: 0,
				},
				avatarUrl:'',
				setName:false
			}
		},
		methods: {
			handleSetName(){
				this.setName=true
			},
			onChooseAvatar(e){
				// 是否有接口可以请求修改数据库中的头像字段
				// console.log(getApp().globalData.userInfo.avatarUrl);
				// getApp().globalData.userInfo.avatarUrl=e.detail.avatarUrl
				this.userIcon=e.detail.avatarUrl
				console.log(this.userIcon);
			},
			handleBusiness() {
				uni.navigateTo({
					url: "/pagesA/business/business",
				})
			},
			// 获取手机号
			// getPhoneNumber(e) {
			// 	let code = e.detail.code
			// 	let query = {
			// 		code,
			// 		openId: getApp().globalData.openId
			// 	}
			// 	uni.$http.post('/Wechat/Auth/grantAuthPhone', query).then(res => {
			// 					console.log(res)
			// 					if(res.data.status === 100) return uni.$showMsg('您取消授权手机号')
			// 				})
			// },
			//登录
			getUserInfo() {
				uni.getUserProfile({
					desc: '登陆后享用更多服务',
					success: (res) => {
						let userInfo = res
						uni.login({
							success: (res) => {
								let code = res.code
								userInfo.code = code
								let params = userInfo
								uni.$http.post('/Wechat/Auth/grantAuth', params).then(res => {
									if (res.statusCode !== 200) return uni.$showMsg('登录失败')
									getApp().globalData.userInfo = res.data.data
									this.userIcon = getApp().globalData.userInfo.avatarUrl
									this.nickName = getApp().globalData.userInfo.nickName
									uni.setStorageSync("userInfo", JSON.stringify(res.data
										.data));
									getApp().globalData.openId = res.data.data.openId
									let token = res.data.data.token
									getApp().globalData.token = token
									uni.setStorageSync("token", res.data.data.token)
									this.getOrderCount()
								})
							}
						})
					}
				})
			},
			//去往相应页面
			toOrderPage(item) {
				if (!getApp().globalData.token) return uni.$showMsg('您还未登录，请先登录')
				uni.navigateTo({
					url: `/pagesA/my/order/myorder/myorder?active=${item.active}&id=${item.id}`
				})
			},

			//去优惠券页
			toDiscount() {
				if (!getApp().globalData.token) return uni.$showMsg('您还未登录，请先登录')
				uni.navigateTo({
					url: '/pagesA/my/discount/discount'
				})
			},

			//宫格去往相应页面
			toPage(item) {
				if (item.id == 62 || item.id == 30 || item.id === 40) {
					if (!getApp().globalData.token) return uni.$showMsg('您还未登录，请先登录')
					uni.navigateTo({
						url: `/pagesA/my/order/myorder/myorder?active=${item.active}&id=${item.id}`
					});
				} else if (item.id === 4) {
					if (!getApp().globalData.token) return uni.$showMsg('您还未登录，请先登录')
					uni.navigateTo({
						url: '/pagesA/my/discount/discount'
					});
				} else if (item.id === 5) {
					uni.navigateTo({
						url: '/pagesB/bankCard/bankCard'
					});
				} else if (item.id === 6) {
					uni.navigateTo({
						url: '/pagesB/complaint/complaint'
					})
				} else if (item.id === 3) {
					uni.navigateTo({
						url: item.link
					})
				}

			},
			// 订单状况
			getOrderCount() {
				uni.$http.get(`/Wechat/Order/getOrderCount`)
					.then(res => {
						if (res.statusCode === 500) return;
						Object.keys(res.data.data).forEach((item, val) => {
							this.orderStatus[item] = res.data.data[item];
						})
					})
			},
			// 获取为您推荐
			getIndexList(cb) {
				const params = {
					page: this.page,
					pageSize: this.pageSize,
				}
				uni.$http.get("/Wechat/Centre/indexList", params)
					.then(res => {
						const data = res.data.data.data;
						for (let i in data) {
							data[i].imgurl = getApp().globalData.baseImg + data[i].imgurl;
							data[i].id = data[i].goods_id;
							if (data[i].rent_label !== "") {
								data[i].rent_label = data[i].rent_label.split(",");
							}
						}
						this.itemList = [...this.itemList, ...data];
						cb && cb();
					})
			}
		},
		onPullDownRefresh() {
			this.itemList = []
			this.page = 1
			this.getIndexList(() => uni.stopPullDownRefresh())
		},
		onReachBottom() {
			this.isload = true
			if (this.isload) {
				this.page++
				this.getIndexList()
				this.isload = false
			}
		},
	}
</script>
<style scoped lang="scss">
	// 微信头像
	.avatar-wrapper{
		// font-size: 20rpx;
		// background-color: transparent;
		// border: 1rpx solid transparent;
		// width: 180rpx;
		// position: relative;
		// left: -20rpx;
	}
	.my {
		background-color: #F7F7F7;
		padding: 20rpx;

		.title_card {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 24rpx;
			padding-bottom: 10rpx;
			box-sizing: border-box;
			overflow: hidden;

			.pic_img {
				display: flex;
				justify-content: space-between;

				.login {
					padding: 30rpx;

					.text {
						font-size: 30rpx;
						color: #333333;
					}

					.active-text {
						font-size: 38rpx;
						color: #000000;
						line-height: 26rpx;
						font-weight: 400;
					}
				}

				.photo {
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
					position: relative;
					left: -24rpx;
				}
				.photoBtn{
					background-color: transparent;
					outline-color: transparent;
				}
				.photoBtn::after{
					border: none;
				}
			}
		}

		.coupon {
			width: 100%;
			height: 167rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.status_bar {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;
			font-size: 24rpx;
			color: #666666;

			.grid-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				.card-image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}

				.num {
					position: absolute;
					right: 0;
					top: 0;
					font-size: 24rpx;
					width: 30rpx;
					height: 30rpx;
					text-align: center;
					line-height: 30rpx;
					border-radius: 50%;
					color: white;
					background-color: #ec5037;
				}
			}
		}

		.nine_grid {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			background-color: white;
			border-radius: 20rpx;
			overflow: hidden;
			border: 1rpx solid #f0f0f0;
			box-sizing: border-box;

			.item {
				width: 236rpx;
				height: 190rpx;
				text-align: center;
				padding: 20rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;

				&:nth-of-type(1),
				&:nth-of-type(2),
				&:nth-of-type(4),
				&:nth-of-type(5),
				&:nth-of-type(7) {
					border-right: 1px solid #f0f0f0;
					border-bottom: 1px solid #f0f0f0;
				}

				&:nth-of-type(3),
				&:nth-of-type(6) {
					border-bottom: 1px solid #f0f0f0;
				}


				.grid-item-box-cate {
					.categroy-image {
						width: 88rpx;
						height: 88rpx;
					}
				}
			}
		}

		.recommend {
			.head {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: row;
				margin: 70rpx 0;

				.title {
					font-size: 28rpx;
					font-weight: bold;
				}

				.img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10px;
				}
			}
		}
	}
</style>